<template>
	<div class="charge-container">
		<template>
			<el-table :data="vipList" border style="width: 100%">
				<el-table-column align="center" label="产品图片" width="130">
					<!-- 插槽作用域 -->
					<template v-slot="{ row }">
						<el-avatar shape="square" :size="80" fit="scale-down" :src="row.imageUrl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="productName" align="center" label="产品名称">
				</el-table-column>
				<el-table-column prop="description" align="center" label="产品描述">
				</el-table-column>
				<el-table-column prop="price" align="center" label="价格(元)">
				</el-table-column>
				<el-table-column prop="inventory" align="center" label="库存">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template v-slot="{ row }">
						<el-button type="primary" @click="pre_order(row)" icon="iconfont icon-vip3">充值</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>
<script>
import * as api from '@/api/transaction'
export default {
	data() {
		return {
			vipList: [],
		};
	},
	meta: {
		title: "vipCharge",
		icon: "iconfont icon-chongzhi", //存菜单对应的图标的类名
		name: "充值中心"
	},
	created() {
		this.getVipList()
	},
	methods: {
		pre_order(row) {
			//获得当前这一行的product_id 产品id
			console.log(row);
			let { product_id ,category_id} = row

			// this.$confirm  提示
			this.$confirm("您正在购买" + row.description + "请确认您已经满18岁,并且具备购买能力,是否确定购买?", "购买提示", {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: "success"
			})
				.then(() => {//点了确定
					//跳转到预支付页面
					this.$router.push({ path: '/preorder', query: { product_id ,category_id} })
				})
				.catch(() => { //点了取消
					this.$message({
						type: 'error',
						message: '已取购买'
					});
				})
		},

		getVipList() {
			api.getVipListApi()
				.then(res => {
					console.log(res.data)
					this.vipList = res.data.data;
				})
		}
	},

};
</script>
<style scoped lang="less">
.el-avatar {
	/deep/ img {
		width: 100%;
	}

	height: 30px !important;
	background-color: #fff;
}

.el-button--primary {
	background-color: #05a000;
}
</style>
